<!-- 学社 - 学社详情 -->
<template>
  <view>
    <z-navbar title="学社详情" :custom-back="onBackHome" />
    <view class="px-4 pb-4">
      <!-- 基本信息 -->
      <view class="flex justify-between pt-3">
        <view class="flex flex-col flex-1">
          <view class="text-lines-2 text-xl font-bold">{{ state.detailData?.club_name }}</view>
          <view class="mb-1 c-#999 text-24">学社ID：{{ state.detailData?.clubId }}</view>
          <u-image v-if="state.detailData?.creator?.company_auth" width="144" height="32"
            src="/static/images/home/img_company_auth.png"></u-image>
        </view>
        <u-image width="300" height="200" border-radius="12" :src="state.detailData?.cover_image"></u-image>
      </view>
      <!-- 学社介绍 -->
      <view class="title mt-3 mb-2">学社介绍</view>
      <text class="c-#333 text-sm">{{ state.detailData?.club_introduce }}</text>
      <view class="flex items-center mt-2">
        <u-image width="80" height="80" shape="circle" :src="state.detailData?.creator?.avatar"
          @click="toHomePage(state.detailData?.creator_id)"></u-image>
        <view class="flex flex-col justify-between ml-3 h-78">
          <view class="flex items-center">
            <view class="text-28 c-#333 mr-2" @click="toHomePage(state.detailData?.creator_id)">{{
              state.detailData?.creator?.nickname }}</view>
            <view class="w-66 h-32 leading-4 text-center bg-#F4AF22 c-#fff text-20">社长</view>
          </view>
          <view class="flex items-center">
            <view class="c-#999 text-24">创建{{ state.detailData?.create_day }}天</view>
            <view class="w-2 h-24 bg-#B5B5B5 mx-2" />
            <view class="c-#999 text-24">成员{{ state.detailData?.member_number }}人</view>
          </view>
        </view>
      </view>
      <!-- 专属顾问 -->
      <view class="title mt-5 mb-3">专属顾问（{{ state.detailData?.counselor.length }}人）</view>
      <scroll-view class="whitespace-nowrap w-full" scroll-x :show-scrollbar="false">
        <view class="scroll-view-item" v-for="(item, index) in state.detailData?.counselor" :key="index">
          <view class="flex flex-col items-center">
            <u-image width="80" height="80" shape="circle" :src="item.user.avatar"
              @click="toHomePage(item.user_id)"></u-image>
            <view class="mt-1 w-full c-#333 text-28 text-center text-single" @click="toHomePage(item.user_id)">{{
              item.user.nickname }}
            </view>
          </view>
        </view>
      </scroll-view>
      <!-- 申请信息 -->
      <view class="shadow-apply">
        <view class="title ml-2 mb-2">申请信息</view>
        <!-- 审核中 -->
        <view v-if="(state.detailData?.join_status == 0 || state.detailData?.join_status == 2) && state.isAudit"
          class="flex justify-center pt-4">
          <z-empty imgWidth="176" imgHeight="176"
            :descText="state.detailData?.join_status == 0 ? '您已提交申请，正在审核中~' : '您的加入申请已被驳回，请重新提交申请~'" />
        </view>
        <view v-if="(state.detailData?.join_status == 0 || state.detailData?.join_status == 2) && state.isAudit"
          class="mt-3 mb-5 text-28 c-#666 text-center">绑定“拓普旺跨境服务”公众号接收消息更及时哦</view>
        <!-- 待申请 -->
        <view v-else class="mx-2">
          <u-form :model="state.formData" ref="form" :label-style="labelStyle" label-width="130"
            :error-type="state.errorType">
            <u-form-item label="姓名" prop="name">
              <u-input v-model="state.formData.name" placeholder-style="font-size: 28rpx; color: #999" input-align="right"
                :custom-style="inputStyle" placeholder="请输入姓名（必填）" />
            </u-form-item>
            <u-form-item label="微信号">
              <u-input v-model="state.formData.wechat_code" placeholder-style="font-size: 28rpx; color: #999"
                input-align="right" :custom-style="inputStyle" placeholder="请输入微信号（选填）" />
            </u-form-item>
            <u-form-item label="公司名称">
              <u-input v-model="state.formData.company_name" placeholder-style="font-size: 28rpx; color: #999"
                input-align="right" :custom-style="inputStyle" placeholder="请输入公司名（选填）" />
            </u-form-item>
            <u-form-item label="备注">
              <u-input v-model="state.formData.remark" placeholder-style="font-size: 28rpx; color: #999"
                input-align="right" :custom-style="inputStyle" placeholder="填写加入学社的原因（选填）" />
            </u-form-item>
          </u-form>
        </view>
        <view class="px-8 mt-5 flex justify-between">
          <view v-if="(state.detailData?.join_status == 0 || state.detailData?.join_status == 2) && state.isAudit"
            @click="state.showBindModal = true"
            class="flex-1 c-#fff h-72 leading-9 text-center text-28 rounded-md btn-bind mr-3">绑定公众号</view>
          <view class="flex-1 bg-#F4AF22 c-#fff h-72 leading-9 text-center text-28 rounded-md" @click="onSubmit">
            {{ state.detailData?.join_status == 0 || state.detailData?.join_status == 2 ? "再次申请" : "申请加入" }}
          </view>
        </view>
      </view>
    </view>
    <!-- 绑定公众号弹窗 -->
    <u-modal v-model="state.showBindModal" :show-title="false" border-radius="12" :show-confirm-button="false">
      <view class="slot-content">
        <view @click="state.showBindModal = false" class="absolute top-0 right-17 w-166 h-166 flex justify-end">
          <image class="mt-3 mr-2 w-22 h-22" src="/static/images/home/ic_delete.png" />
        </view>
        <image @click="previewImage(['/package_society/static/images/img_wx_qr.png'], 0)" class="w-432 h-432 mb-2"
          src="/package_society/static/images/img_wx_qr.png"></image>
        <view class="c-#333 text-sm text-center">点击二维码查看大图，长按图片选择“拓普旺跨境服务”公众号，点击关注公众号即可完成绑定~</view>
      </view>
    </u-modal>
  </view>
</template>

<script setup>
import { showToast, navigate, previewImage } from "@/common/util/uni";
import { toHomePage } from "@/common/util/util";
import { getSocietyDetail, postSocietyApply } from "@/common/http/module/society.js";
import { useUserStore } from '@/store/user'

const userStore = useUserStore()
const state = reactive({
  showBindModal: false,
  sceneArray: [], // 扫码进入
  club_id: '', // 学社id
  detailData: null, // 学社详情数据
  isAudit: false, // 是否在审核中
  errorType: ["toast"],
  formData: {
    name: "",
    wechat_code: "",
    company_name: "",
    remark: "",
  },
});

const form = ref();
const formRules = {
  name: [
    { required: true, message: "请输入姓名", trigger: ["blur", "change"] },
  ],
};

const labelStyle = {
  fontFamily: "PingFang SC",
  color: "#333333",
  fontSize: "28rpx",
};
const inputStyle = {
  color: "#333",
  fontSize: "28rpx",
};

watch(() => userStore.userInfo, (val) => {
  if (val) {
    console.log('详情页用户信息变化', val, state.club_id);
    loadData(state.club_id)
  }
})

// 扫码进来的点击返回回到首页
function onBackHome() {
  if (state.sceneArray.length == 0) {
    uni.navigateBack()
  } else {
    uni.switchTab({
      url: '/pages/index/index'
    });
  }
}

// 提交
function onSubmit() {
  state.isAudit = false
  // 信息回填
  if (state.detailData && state.detailData.apply_info) {
    state.formData = state.detailData?.apply_info
  }
  form.value.validate(valid => {
    if (!valid) return
    if (!state.formData.name) {
      showToast('请填写姓名', 'error')
      return
    }
    const params = {
      ...state.formData,
      club_id: state.club_id
    }
    postSocietyApply(params).then(() => {
      // 区分申请加入和再次申请
      showToast("已提交申请");
      loadData(state.club_id)
    })
  });
}

function loadData(id) {
  // 获取学社详情
  getSocietyDetail(id).then((res) => {
    state.detailData = res.data;
    state.isAudit = state.detailData?.join_status == 0 || state.detailData?.join_status == 2
    // 扫码进入，若已加入需重定向到学社首页
    if (!state.detailData.is_join || !state.sceneArray[3]) return
    // 防止登录成功500ms返回该页面立即跳转学社首页bug
    showToast('已加入该学社', 'none')
    setTimeout(() => {
      navigate(`/package_society/pages/society/index?tabId=0&club_id=${state.detailData.id}`)
    }, 2000)
  });
}

onLoad((options) => {

  // 获取识别小程序的scene值
  try {
    const { query } = wx.getEnterOptionsSync()
    if (query && query.scene) {
      const scene = decodeURIComponent(query.scene)
      state.sceneArray = scene.split("_")
    }
  } catch (e) {
    console.log(e);
  }
  state.club_id = options.id || state.sceneArray[3]
  loadData(state.club_id);
});

onReady(() => {
  nextTick(() => form.value.setRules(formRules));
});
</script>

<style lang="scss" scoped>
.title {
  color: #333;
  font-size: 40rpx;
  font-weight: bold;
}

.scroll-view-item {
  display: inline-block;
  margin-right: 70rpx;
  max-width: 136rpx;
}

.scroll-view-item:last-child {
  margin-right: 0;
}

.shadow-apply {
  margin-top: 24rpx;
  padding: 24rpx 0 28rpx;
  border-radius: 6px;
  background-color: #ffffff;
  box-shadow: -1.2246468525851679e-16px 1px 6px 0px rgba(206, 143, 12, 0.16);
}

.btn-bind {
  border: 2px solid #F4AF22;
  color: #F4AF22;
}

.slot-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40rpx;
}
</style>
